<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <h:form id="areaForm" enctype="multipart/form-data">
                <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" />
                <br/>
                <h3 class="title">Cadastrando Unidade</h3>
                <p:growl id="messages" showDetail="true" autoUpdate="true"  /> 
                <p:panel id="areaPanel" style="background: none; border: none;" 
                         styleClass="container_24 clearfix both ">
                    <h4 class="title">Dados Gerais</h4>
                    <p:outputLabel value="Nome:" styleClass="grid_3" for="nomeInputText" />
                    <p:inputText id="nomeInputText" styleClass="grid_19" required="true" requiredMessage="O nome é Obrigatório" 
                                 value="#{ managerCriarUnidade.unidade.nome }" />
                    
                    <p:outputLabel value="Cod. CNES:" styleClass="grid_3" for="codigoCnesInputText" />
                    <p:inputText id="codigoCnesInputText" styleClass="grid_8" 
                                 required="true" requiredMessage="O campo CNES é obrigatório"
                                 value="#{ managerCriarUnidade.unidade.codigoCNES }" />

                    <p:outputLabel value="Tipo Unidade:" styleClass="grid_3" for="unidadeOneMenu" />
                    <div class="grid_8" style="width: 30.2%" >
                        <p:selectOneMenu id="unidadeOneMenu" 
                                         value="#{managerCriarUnidade.unidade.tipoUnidade}" >
                            <f:selectItems value="#{managerCriarUnidade.tipoUnidade()}" />
                        </p:selectOneMenu>
                    </div>

                </p:panel>
                <p:panel id="enderecoPanel" style="background: none; border: none;" 
                         styleClass="container_24 clearfix both ">
                    <h4 class="title">Dados Endereço</h4>

                    <p:outputLabel value="CEP:" styleClass="grid_3" for="cepInputMask" />
                    <p:inputMask id="cepInputMask" styleClass="grid_4" mask="99.999-999" autocomplete="false" 
                                 value="#{managerCriarUnidade.unidade.endereco.cep}"
                                 >
                        <p:ajax event="blur" process="@this" update=":areaForm:enderecoPanel"
                                listener="#{managerCriarUnidade.existeEndereco()}" />
                    </p:inputMask>
                    <p:outputLabel value="* CEP Inválido ( Informe o Logradouro, Bairro, Número )" rendered="#{managerCriarEquipe.mensagemCep}" style="color: red; float: left"  />
                    <div class="clear"/>
                    <p:outputLabel value="Logradouro:" styleClass="grid_3 logradouroLabelImovel" for="patioInputText" />
                    <p:inputText id="patioInputText" styleClass="grid_19" 
                                 readonly="#{managerCriarUnidade.disableEnderecoImovel}"

                                 required="true" requiredMessage="O campo Logradouro é Obrigatório"
                                 value="#{managerCriarUnidade.unidade.endereco.logradouro}" />
                    <div class="clear"/>
                    <p:outputLabel value="Bairro:" styleClass="grid_3" for="neighborhoodInputText" />
                    <p:inputText id="neighborhoodInputText" styleClass="grid_19"
                                 required="true" requiredMessage="O campo bairro é Obrigatório"
                                 readonly="#{managerCriarUnidade.disableEnderecoImovel}"
                                 value="#{managerCriarUnidade.unidade.endereco.bairro.nome}" />

                    <p:outputLabel value="Número:" styleClass="grid_3" for="numInputText" />
                    <p:inputText id="numInputText" styleClass="grid_4"
                                 value="#{managerCriarUnidade.unidade.endereco.numero}"
                                 />

                    <p:outputLabel value="Complemento:" styleClass="grid_5 alpha" for="compInputText" />
                    <p:inputText id="compInputText" styleClass="grid_10"
                                 value="#{managerCriarUnidade.unidade.endereco.complemento}"
                                 />

                </p:panel>
<!--                <p:panel id="equipePanel" style="background: none; border: none;" 
                         styleClass="container_24 clearfix both ">
                    <h4 class="title">Adicionando Equipe</h4> 
                    <p:commandButton icon="ui-icon-circle-plus" style="float: right" styleClass="grid_4" 
                                     onclick="dialogEquipe.show();" 
                                     process="@this" update="@this" immediate="true" value="Adicionar" />
                    <br/><br/>
                    <p:dataTable id="equipeTable" var="item" value="{managerCriarUnidade.equipeSelecionados}" 
                                 styleClass="grid_24" rowIndexVar="rowid"                 
                                 rows="5" paginator="true" lazy="true"    
                                 paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                 currentPageReportTemplate="{currentPage} de {totalPages}"
                                 paginatorPosition="bottom" emptyMessage="Nenhum registro encontrado"
                                 style="white-space: pre-wrap;">

                        <f:facet name="header">
                            <p:outputLabel value="Equipe" />
                        </f:facet> 
                        <p:column headerText="Ação" width="80">
                            <p:commandButton update=":areaForm:equipeTable" process="@this" title="Excluir"
                                             oncomplete="dlg.show()" 
                                             icon="ui-icon-trash" actionListener="{managerCriarUnidade.setRemoverEquipe(item)}">
                               
                            </p:commandButton>


                        </p:column>

                        <p:column headerText="Nome" width="400">  
                            <h:outputText value="{item.nome}" />
                            <br/>
                        </p:column>
                        <p:column headerText="Código">  
                            <h:outputText value="{item.codigo}"/>
                        </p:column> 
                        <p:column headerText="Profissionais" width="450" style="white-space: pre-wrap;">  
                            <ui:repeat value="{item.profissionais}" var="profissional">
                                <h:outputText value="{ profissional.nome } " /><br/>
                            </ui:repeat>
                        </p:column> 

                    </p:dataTable> 

                </p:panel>-->
                <br/>
                <h3 class="title">Área da Unidade</h3>
                <p:panel id="coordenadaPanel" style="background: none; border: none;" 
                         styleClass="container_24 clearfix both ">
                    <h4 class="title">Georreferenciamento</h4>

                    <p:outputLabel value="Nome:" styleClass="grid_3" for="nomeAreaInputText" />
                    <p:inputText id="nomeAreaInputText" styleClass="grid_19" 
                                 value="#{ managerCriarUnidade.area.nome }" />

                    <div class="clear"/>
                    <br/>
                    <center>
                        <p:gmap id="map" center="-2.9136, -41.7577" zoom="15" type="ROADMAP"   
                                style="width:910px;height:500px" model="#{managerCriarUnidade.mapModel}" > 

                            <p:ajax event="pointSelect" update="@this" listener="#{managerCriarUnidade.handlePointClick}" />
                            <p:ajax event="markerDrag" listener="#{managerCriarUnidade.onMarkerDrag}" update="@this"/>

                        </p:gmap>  
                    </center>
                </p:panel>

                <br/>
                <div class="buttonAction">
                    <p:commandButton value="Salvar" icon="ui-icon-disk"
                                     update="@form" 
                                     actionListener="#{managerCriarUnidade.salvar()}"
                                     styleClass="ui-priority-primary" />

                    <p:button href="index.xhtml" value="Cancelar"  icon="ui-icon-trash" />
                </div >


                <!--               DIALOG-->


<!--                <p:dialog id="equipeDialog" widgetVar="dialogEquipe" header="Equipe" dynamic="true"
                          modal="true" appendToBody="false" resizable="false" width="90%" height="450px" draggable="false" closable="false">

                    <p:tabView id="equipeTabView">

                        <p:tab id="pesquisarEquipeTab" title="Pesquisar Equipe">

                            <p:panel id="equipePesquisarPanel" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix both ">
                                <h4 class="title">Selecionar Equipe</h4>
                                <p:outputLabel value="Nome:" styleClass="grid_3" for="nomeInputText" />
                                <p:inputText id="nomeInputText" styleClass="grid_19" 
                                             value="{ managerCriarUnidade.equipePesquisar.nome }" />
                                <p:outputLabel value="Código:" styleClass="grid_3" for="cnesInputText" />
                                <p:inputText id="cnesInputText" styleClass="grid_8" 
                                             value="{ managerCriarUnidade.equipePesquisar.codigo }" />
                                <div class="clear"/>


                                <div class="buttonAction">
                                    <p:commandButton actionListener="{ managerCriarUnidade.pesquisarEquipe() }" value="Pesquisar"
                                                     update=":areaForm:equipeTabView:equipePesquisarPanel" process=":areaForm:equipeTabView:equipePesquisarPanel"
                                                     icon="ui-icon-search" />
                                    <p:commandButton value="Cancelar" icon="ui-icon-cancel" onclick="dialogEquipe.hide()" process="@this"
                                                     update=":areaForm:equipeDialog" />
                                </div>
                                <br/>

                                <p:dataTable id="equipeDataTable" var="item" value="{ managerCriarUnidade.equipesPesquisar }" 
                                             rows="5" paginator="true" paginatorPosition="bottom" rowKey="{ item.id }"
                                             selection="{ managerCriarUnidade.equipeSelecionado }" selectionMode="single"
                                             emptyMessage="Nenhum profissional encontrado"
                                             style="white-space: pre-wrap;" styleClass="grid_24">

                                    <f:facet name="header">Equipe</f:facet>
                                    <p:ajax event="rowSelect"  process="@this" update="@this"/>

                                    <p:column headerText="Nome" width="30%">
                                        <h:outputText value="{ item.nome }" />
                                    </p:column>

                                    <p:column headerText="Profissionais" width="70%">
                                        <ui:repeat value="{item.profissionais}" var="profissional">
                                            <h:outputText value="{ profissional.nome } " /><br/>

                                        </ui:repeat>
                                    </p:column>

                                </p:dataTable>

                                <div class="buttonAction"> 
                                    <p:commandButton actionListener="{ managerCriarUnidade.selecionarEquipe() }"
                                                     update=":areaForm:equipeTable, :areaForm:equipeDialog" process="@this"
                                                     value="Selecionar" icon="ui-icon-plus" oncomplete="dialogEquipe.hide();" />
                                </div>

                            </p:panel>

                        </p:tab>

                                                <p:tab id="cadastrarProfissionalTab" title="Cadastrar Profissional">
                        
                                                    <p:growl id="messages" showDetail="true" autoUpdate="true"  /> 
                                                    <p:panel id="personPanel" style="background: none; border: none;" 
                                                             styleClass="container_24 clearfix both ">
                                                        <h4 class="title">Dados Gerais</h4>
                                                        <p:outputLabel value="Nome :" styleClass="grid_3" for="nInputText" />
                                                        <p:inputText id="nInputText" styleClass="grid_19" required="true" requiredMessage="O Campo nome é Obrigatório" 
                                                                     value="{ managerCriarEquipe.profissionalCadastrar.nome }" />
                                                        <p:outputLabel value="CNES :" styleClass="grid_3" for="cInputText" />
                                                        <p:inputText id="cInputText" styleClass="grid_8" required="true" requiredMessage="O Campo cnes é Obrigatório" 
                                                                     value="{ managerCriarEquipe.profissionalCadastrar.cnes }" />
                                                        <div class="clear"/>
                                                        <p:outputLabel value="Cartão SUS :" styleClass="grid_3" for="sInputText" />
                                                        <p:inputText id="sInputText" styleClass="grid_8" required="true" requiredMessage="O Campo Cartão SUS é Obrigatório" 
                                                                     value="{ managerCriarEquipe.profissionalCadastrar.numSus }" />
                                                        <div class="clear"/>
                        
                                                        <p:outputLabel value="Tipo Profissional:" styleClass="grid_3" for="tipoOneMenu" />
                                                        <div class="grid_8">
                                                            <p:selectOneMenu id="tipoOneMenu" 
                                                                             value="{ managerCriarEquipe.profissionalCadastrar.tipoProfissional }" >
                                                                <f:selectItems value="{ managerCriarEquipe.tipoProfissional() }" />
                                                            </p:selectOneMenu>
                                                        </div>
                        
                                                    </p:panel>  
                                                    <p:panel id="docPanel" style="background: none; border: none;" 
                                                             styleClass="container_24 clearfix both ">
                                                        <h4 class="title">Documentos Pessoais</h4>
                                                        <p:outputLabel value="Cpf:" styleClass="grid_3" for="cpfInputText" />
                                                        <p:inputMask mask="999.999.999-99" id="cpfInputText" styleClass="grid_8" 
                                                                     value="{ managerCriarEquipe.profissionalCadastrar.cpf }" />
                                                        <p:outputLabel value="Data Nasc.:" styleClass="grid_3 dataNascLabelImovel" for="dataNascCalendar" 
                                                                       />
                                                        <p:calendar id="dataNascCalendar" styleClass="grid_8"
                                                                    showOn="both" locale="pt" yearRange="1900:2020" 
                                                                    navigator="true" pattern="dd/MM/yyyy"
                                                                    value="{ managerCriarEquipe.profissionalCadastrar.dataNascimento }"/>
                                                        <p:outputLabel value="Rg:" styleClass="grid_3" for="rgInputText" />
                                                        <p:inputText  id="rgInputText" styleClass="grid_8" 
                                                                      value="{ managerCriarEquipe.profissionalCadastrar.rg }" />
                                                        <p:outputLabel value="O. Emissor:" styleClass="grid_3" for="emissorInputText" />
                                                        <p:inputText  id="emissorInputText" styleClass="grid_8" 
                                                                      value="{ managerCriarEquipe.profissionalCadastrar.orgaoEmissor }" />
                                                        <p:outputLabel value="PisPasep :" styleClass="grid_3" for="pisInputText" />
                                                        <p:inputText  id="pisInputText" styleClass="grid_8" 
                                                                      value="{ managerCriarEquipe.profissionalCadastrar.pisPasep }" />
                                                        <p:outputLabel value="Nacionalidade:" styleClass="grid_3" for="nacionalidadeOneMenu" />
                                                        <div class="grid_8">
                                                            <p:selectOneMenu id="nacionalidadeOneMenu" 
                                                                             value="{ managerCriarEquipe.profissionalCadastrar.nacionalidade}" >
                                                                <f:selectItems value="{ managerCriarEquipe.nacionalidade()}" />
                                                            </p:selectOneMenu>
                                                        </div>
                        
                                                    </p:panel>
                                                    <p:panel id="enderecoPanel" style="background: none; border: none;" 
                                                             styleClass="container_24 clearfix both ">
                                                        <h4 class="title">Dados Endereço</h4>
                        
                                                        <p:outputLabel value="CEP:" styleClass="grid_3" for="cepInputMask" />
                                                        <p:inputMask id="cepInputMask" styleClass="grid_4" mask="99.999-999" autocomplete="false" 
                                                                     value="{managerCriarEquipe.profissionalCadastrar.endereco.cep}"
                                                                     >
                                                            <p:ajax event="blur" process=":equipeForm:profissionalTabView:enderecoPanel" update=":equipeForm:profissionalTabView:enderecoPanel" 
                                                                    listener="{managerCriarEquipe.existeEndereco()}" />
                                                        </p:inputMask>
                                                        <p:outputLabel value="* CEP Inválido ( Informe o Logradouro, Bairro, Número )" rendered="#{managerCriarEquipe.mensagemCep}" style="color: red; float: left"  />
                                                        <div class="clear"/>
                                                        <p:outputLabel value="Logradouro:" styleClass="grid_3 logradouroLabelImovel" for="patioInputText" />
                                                        <p:inputText id="patioInputText" styleClass="grid_19" 
                                                                     readonly="{managerCriarEquipe.disableEnderecoImovel}"
                        
                                                                     required="true" requiredMessage="O campo Logradouro é Obrigatório"
                                                                     value="{managerCriarEquipe.profissionalCadastrar.endereco.logradouro}" />
                                                        <div class="clear"/>
                                                        <p:outputLabel value="Bairro:" styleClass="grid_3" for="neighborhoodInputText" />
                                                        <p:inputText id="neighborhoodInputText" styleClass="grid_19"
                                                                     required="true" requiredMessage="O campo bairro é Obrigatório"
                                                                     readonly="{managerCriarEquipe.disableEnderecoImovel}"
                                                                     value="{ managerCriarEquipe.profissionalCadastrar.endereco.bairro.nome}" />
                        
                                                        <p:outputLabel value="Número:" styleClass="grid_3" for="numInputText" />
                                                        <p:inputText id="numInputText" styleClass="grid_4"
                                                                     value="{managerCriarEquipe.profissionalCadastrar.endereco.numero}"
                                                                     />
                        
                                                        <p:outputLabel value="Complemento:" styleClass="grid_5 alpha" for="compInputText" />
                                                        <p:inputText id="compInputText" styleClass="grid_10"
                                                                     value="{ managerCriarEquipe.profissionalCadastrar.endereco.complemento}"
                                                                     />
                        
                                                    </p:panel>
                        
                                                    <br/>
                                                    <div class="buttonAction">
                                                        <p:commandButton value="Salvar" icon="ui-icon-disk"
                                                                         update=":equipeForm:profissionalTabView, :equipeForm:profissionalTable"
                                                                         process="@this, :equipeForm:profissionalTabView:cadastrarProfissionalTab" 
                                                                         actionListener="{managerCriarEquipe.salvarProfissional()}"
                                                                         styleClass="ui-priority-primary" />
                        
                                                        <p:commandButton oncomplete="dialogProfissional.hide()"  value="Cancelar"  icon="ui-icon-trash" />
                                                    </div >
                                                </p:tab>

                    </p:tabView>
                </p:dialog>
                <p:dialog id="dlg" widgetVar="dlg" header="Remover Profissional" dynamic="true"
                          modal="true" appendToBody="false" resizable="false" width="50%" height="200px" draggable="false" closable="false">

                    <h4 class="title">Deseja Remover essa Equipe ?</h4>
                    <div class="buttonAction"> 
                        <p:commandButton value="Sim" process="@this"  update=":areaForm:equipeTable" 
                                         styleClass="ui-priority-primary" oncomplete="dlg.hide()"
                                         actionListener="{managerCriarUnidade.removerEquipe()}"/>

                        <p:commandButton process=":areaForm:equipeTable" oncomplete="dlg.hide()" value="Não" />
                    </div>


                </p:dialog>-->


            </h:form>
        </ui:define>
    </ui:composition>

</html>
